@import "01_colors.scss";

.reviews {
    width: 100%;
    height: 702px;
    background: $color-one;
    box-sizing: border-box;
    z-index: 100;
    position: relative;
    border-radius: 170px 0 0 0;
    max-width: 1440px;
    min-width: 325px;
    margin: 0 auto;
  }
  
  .reviews-center {
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
  }
  
  .reviews-h2 {
    font-weight: 400;
    font-size: 64px;
    line-height: 72px;
    align-items: center;
    color: #fff;
    padding-top: 74px;
    margin: 0 auto 0 96px;
  }
  
  .reviews-for-flex {
    width: 100%;
    height: 500px;
    max-width: 1440px;
    overflow-x: auto;
    scroll-behavior: smooth;
    transition: 0.3s ease;
  }

  .reviews-for-flex:hover::-webkit-scrollbar{
    border-bottom: 0.1px solid $color-two-for-scrollbar; 
  }

  .reviews-for-flex:hover::-webkit-scrollbar-thumb:horizontal{
    background: $color-two-for-scrollbar-thumb;
  }
  
  .reviews-cards {
    margin-top: 57px;
    width: 2600px;
    height: fit-content;
    display: flex;
    margin-left: 79px;
  }
  
  .reviews-card {
    width: 319px;
    height: 399px;
    background: $color-five;
    border-radius: 48px;
    margin: 0 24px 0 16px;
  }
  
  .reviews-card-foto {
    width: fit-content;
    margin: 39px auto;
    margin-bottom: 33px;
  }
  
  .card-foto {
    width: 159px;
    height: 159px;
  }
  
  .reviews-card-header {
    font-weight: 400;
    font-size: 24px;
    line-height: 32px;
    align-items: center;
    color: $color-for-links;
    width: fit-content;
    max-width: 90%;
    margin: 0 auto;
  }
  
  .reviews-card-p {
    width: 75%;
    margin: 20px auto 0 auto;
    font-family: "Roboto";
    font-weight: 300;
    line-height: 22px;
    color: $color-for-links;
  }

  .small-screen {
    display: none;
  }

  @media (max-width: 1280px) {
    .reviews {
      height: 685px;
    }
    .reviews-h2 {
      font-size: 54px;
      line-height: 54px;
    }
  }

  @media (max-width: 1025px) {
    .reviews-h2 {
      font-size: 48px;
      line-height: 52px;
    }
  }

  @media (max-width: 1024px) {
    .reviews {
      border-radius: 0;
      height: 670px;
    }
    .reviews-h2 {
      width: fit-content;
      margin: 0 auto;
    }
    .reviews-cards {
      margin-top: 66px;
      margin-left: 30px;
    }
  }

  @media (max-width: 745px) {
    .reviews {
      height: 670px;
    }
    .reviews-h2 {
      padding-top: 79px;
    }
    .reviews-cards {
      margin-top: 61px;
      margin-left: 36px;
    }
  }

  @media (max-width: 744px) {
    .reviews {
      height: 474px;
    }
    .reviews-h2 {
      font-size: 30px;
      line-height: 36px;
      padding-top: 78px;
    }
    .reviews-cards {
      margin-top: 41px;
      margin-left: 26px;
      width: 1500px;
    }
    .reviews-card {
      width: 192px;
      height: 238px;
      border-radius: 28px;
      margin: 0 2px 0 16px;
    }
    .card-foto {
      width: 95px;
      height: 95px;
    }
    .reviews-card-foto {
      margin: 24px auto 5px auto;
    }
    .reviews-card-header {
      font-size: 16px;
      line-height: 20px;
    }
    .reviews-card-p {
      font-size: 12px;
      line-height: 15px;
    }
    .reviews-card-p {
      display: none;
    }
    .small-screen {
      margin: 10px auto 0 auto;
      display: block;
    }
    .reviews-for-flex {
      height: 315px;
    }
    
  }

  @media (max-width: 375px) {
    .reviews {
      height: 472px;
    }
    .reviews-h2 {
        font-size: 28px;
        line-height: 32px;
        padding-top: 81px;
    }
    .reviews-cards {
        margin-left: 14px;
    }
}